<script setup lang="ts">
import {computed, onBeforeMount, ref} from "vue";
import {useAppConfigStore} from "@/store/system/appConfigStore";
import {
  LikeOutlined,
  FireOutlined,
  UsergroupAddOutlined,
  ThunderboltOutlined,
  PullRequestOutlined,
  MediumOutlined
} from '@ant-design/icons-vue'
import {getHomeHotTabSort, getNewBlogByHome} from "@/api/home/home";
import {ECode} from "@/util/commonUtil";
import PostCard from './card/card.vue'
import Sidebar from './sidebar/index.vue'

const componentShowMap = computed(() => useAppConfigStore().componentShowMap)
const activeName = ref('1')
// Tab栏数据
const tabList = ref<any>([])
// 当前页数
const currentPage = ref<number>(1)
// 当前页数大小
const pageSize = ref<number>(15)
// 排序
const orderBy = ref<string>('')
// 降序字段
const orderByDescColumn = ref<string>('')
// 当前选中的博客分类UID
const blogSortUid = ref('')
const total = ref<number>(0)
// 是否到底
const isEnd = ref<boolean>(false)
// 最新文章列表
const postList = ref<any>([])


onBeforeMount(() => {
  getHomeTabList()
  // 获取最新博客
  getPostList()
})

/*
* 方法区
* ==============================================================*/
function handleClick(tab: any) {
  currentPage.value = 1
  activeName.value = String(tab)
  switch (tab) {
    case '1':
      blogSortUid.value = ''
      orderBy.value = ''
      orderByDescColumn.value = ''
      getPostList()
      break
    case '2':
      blogSortUid.value = ''
      orderBy.value = ''
      orderByDescColumn.value = 'create_time'
      getPostList()
      break
    case '3':
      blogSortUid.value = ''
      orderBy.value = 'userWatch'
      orderByDescColumn.value = ''
      getPostList()
      break
    case '4':
      blogSortUid.value = ''
      orderBy.value = ''
      orderByDescColumn.value = 'click_count'
      getPostList()
      break
    case '5':
      blogSortUid.value = ''
      orderBy.value = ''
      orderByDescColumn.value = 'random'
      getPostList()
      break
    default:
      let blogSort = tabList.value[tab - 6]
      blogSortUid.value = blogSort.uid
      orderByDescColumn.value = 'create_time'
      getPostList()
      break
  }
}

function getHomeTabList() {
  getHomeHotTabSort().then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      tabList.value = response.data
    }
  })
}

function getPostList() {
  // 文章请求参数
  const params = ref({
    currentPage: currentPage.value,
    pageSize: pageSize.value,
    orderBy: orderBy.value,
    orderByDescColumn: orderByDescColumn.value,
    blogSortUid: blogSortUid.value
  })
  getNewBlogByHome(params.value).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let newBlogData = response.data.records
      postList.value = newBlogData
      total.value = response.data.total
      currentPage.value = response.data.current
      pageSize.value = response.data.size
      // 全部加载完毕
      if (newBlogData.length < pageSize.value) {
        isEnd.value = true
      }
    }
  })
}

function loadMoreCurrentPage(e: number) {
  currentPage.value = e
  // 文章请求参数
  const params = ref({
    currentPage: currentPage.value,
    pageSize: pageSize.value,
    orderBy: orderBy.value,
    orderByDescColumn: orderByDescColumn.value,
    blogSortUid: blogSortUid.value
  })
  getNewBlogByHome(params.value).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      isEnd.value = false
      let newBlogData = response.data.records
      postList.value = postList.value.concat(newBlogData)
      total.value = response.data.total
      currentPage.value = response.data.current
      pageSize.value = response.data.size
      // 全部加载完毕
      if (newBlogData.length < pageSize.value) {
        isEnd.value = true
      }
    }
  })
}
</script>

<template>
  <section class="homeArticle min-h-20" v-if="componentShowMap.showBlogSort">
    <!-- 首页文章分类导航栏 -->
    <a-tabs v-model:activeKey="activeName" class="homeTabsHeader" centered @change="handleClick">
      <a-tab-pane key="1">
        <template #tab>
          <LikeOutlined/>
          推荐
        </template>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          <ThunderboltOutlined/>
          最新
        </template>
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #tab>
          <UsergroupAddOutlined/>
          关注
        </template>
      </a-tab-pane>
      <a-tab-pane key="4">
        <template #tab>
          <FireOutlined/>
          最热
        </template>
      </a-tab-pane>
      <a-tab-pane key="5">
        <template #tab>
          <PullRequestOutlined/>
          随机
        </template>
      </a-tab-pane>
      <a-tab-pane v-for="(item,index) in tabList" :key="(index+6)">
        <template #tab>
          <MediumOutlined/>
          {{ item.sortName }}
        </template>
      </a-tab-pane>
    </a-tabs>
    <!-- 首页主体 -->
    <div class="homeArticleMain flex gap-4">
      <!-- 左侧文章卡片 -->
      <PostCard :postList="postList" :isEnd="isEnd" :currentPage="currentPage"
                @loadMoreCurrentPage="loadMoreCurrentPage"/>
      <!-- 右侧卡片 -->
      <Sidebar/>
    </div>
  </section>
</template>

<style scoped lang="less">
:deep(.ant-tabs-tab-btn .anticon) {
  margin-right: 0;
}
@media (max-width: 1024px) {
  .homeArticleMain{
    padding-inline: 1rem;
  }
}
</style>
